<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#div1 
			{
				width: 200px;
				min-height: 20px;
				border: 1px solid #000;
			}
		</style>
	</head>

	<body>
		<input type="button" name="" id="" value="展开" />
		<input type="button" name="" id="" value="收缩" />
		<div id="div1">
		</div>
		
		<script type="text/javascript">
			var inputs = document.getElementsByTagName("input");
			var div = document.getElementById("div1");
			
			var str = "深圳钉子户坚守十几年成孤岛 曾拒2000万补偿.据中国网报道，2016年6月13日，广东深圳，深圳龙华新区深圳北站附近，一栋墙体裸露红砖、显得破旧的七层小楼，孤零零地伫立在空地上，犹如一座孤岛，与远处的高楼形成巨大的反差";
			
			var timer = null;
			var count = 0;
			
			//展开
			inputs[0].onclick = function()
			{
				clearInterval(timer);  //重复点击将上次定时器关闭
				
				function play()
				{
					var val = str.substring(0,++count);  //依次增加div内容
					div.innerHTML = val;   //显示
					
					if (val == str)  //如果文字全部显示完整,结束
					{
						clearInterval(timer);
					}
				}
				
				timer = setInterval(play,50);  //设置定时器
			}
			
			
			//收缩
			inputs[1].onclick = function()
			{
				clearInterval(timer);  //重复点击将上次定时器关闭
				
				function play()
				{
					var val = str.substring(0,--count);  
					div.innerHTML = val;   //显示
					
					if (val == "")  
					{
						clearInterval(timer);
					}
				}
				timer = setInterval(play,50);  //设置定时器
			}
			
		</script>
	</body>

</html>